import { useState } from 'react'
import './index.css'

function DeepSeek() {

    const [question, setQuestion] = useState('') // 输入框的值
    const [response, setResponse] = useState('') // 响应内容
    const [streaming, setStreaming] = useState(false) // 是否开启streaming

    // async function send() {
    //     //获取到用户在 input 输入框中输入的内容，赋值给 question 变量
    //     if (!question) return // 如果用户没有输入内容，直接返回
    //     setResponse('思考中...');
    //     const endPoint = 'https://api.deepseek.com/chat/completions'
    //     const head = {
    //         'content-type': 'application/json',
    //         'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`,
    //     }
    //     const res = await fetch(endPoint, {
    //         method: 'POST',
    //         headers: head,
    //         body: JSON.stringify({
    //             model: 'deepseek-chat',
    //             messages: [{ role: 'user', content: question }],
    //             stream: streaming,
    //         })
    //     })
    //     let data = await res.json();
    //     // 流式输出
    //     if (streaming) {
    //         const reader = data.body.getReader(); // 获取响应体的读取器
    //         const decoder = new TextDecoder(); // 创建文本解码器，解码二进制
    //         let done = false; // 是否读取完成
    //         let buffer = '' // 存储响应体的内容
    //         while (!done) { // 循环读取响应体
    //             const { value, done } = await reader.read(); //读取二进制数据，返回一个对象，包含value和done属性
    //             const chunkValue = buffer + decoder.decode(value); // 解码二进制数据，返回字符串
    //             // console.log(chunkValue);
    //             buffer = ''; // 清空buffer
    //             const lines = chunkValue.split('\n').filter(line => line.startsWith('data:')); // 按换行符分割字符串，返回数组
    //             for (let line of lines) { // 遍历数组，取出每一个元素
    //                 const incoming = InputEvent.slice(6);
    //                 if (incoming === '[DONE]') { // 如果元素是[DONE]，表示读取完成
    //                     done = true; // 设置done为true，结束循环
    //                     break; // 结束循环
    //                 }
    //                 try {
    //                     const data = JSON.parse(incoming); // 解析JSON字符串，返回对象
    //                     const messageContent = data.choices[0].delta.content; // 一小段中文内容
    //                     if (messageContent) { // 如果content属性存在，说明是流式输出的内容
    //                         setResponse(prevResponse => prevResponse + messageContent); // 更新响应内容
    //                     }
    //                 } catch (error) {
    //                     console.log(error);

    //                 }
    //             }
    //         }
    //     } else {
    //         // 非流式输出
    //         const messageContent = data.choices[0].message.content;
    //         setResponse(messageContent);
    //         console.log(data);
    //     }
    // }
    async function send() {
        if (!question) return;
        setResponse('思考中...');
        const endPoint = 'https://api.deepseek.com/chat/completions';
        const head = {
            'content-type': 'application/json',
            'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`,
        };

        if (streaming) {
            try {
                const res = await fetch(endPoint, {
                    method: 'POST',
                    headers: head,
                    body: JSON.stringify({
                        model: 'deepseek-chat',
                        messages: [{ role: 'user', content: question }],
                        stream: true,
                    })
                });

                if (!res.body) throw new Error('No response body');

                const reader = res.body.getReader();
                const decoder = new TextDecoder();
                let result = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    const chunk = decoder.decode(value);
                    const lines = chunk.split('\n').filter(line => line.trim() !== '');

                    for (const line of lines) {
                        if (line.startsWith('data:') && line !== 'data: [DONE]') {
                            try {
                                const jsonStr = line.replace('data: ', '');
                                if (jsonStr.trim() === '') continue;

                                const data = JSON.parse(jsonStr);
                                const content = data.choices[0]?.delta?.content || '';
                                result += content;
                                setResponse(prev => prev + content);
                            } catch (e) {
                                console.error('Error parsing stream data:', e);
                            }
                        }
                    }
                }
            } catch (error) {
                console.error('Streaming error:', error);
                setResponse('发生错误: ' + error.message);
            }
        } else {
            try {
                const res = await fetch(endPoint, {
                    method: 'POST',
                    headers: head,
                    body: JSON.stringify({
                        model: 'deepseek-chat',
                        messages: [{ role: 'user', content: question }],
                        stream: false,
                    })
                });
                const data = await res.json();
                const messageContent = data.choices[0].message.content;
                setResponse(messageContent);
            } catch (error) {
                console.error('Non-streaming error:', error);
                setResponse('发生错误: ' + error.message);
            }
        }
    }


    return (
        <div className="container">
            <div>
                <label htmlFor="">请输入：</label>
                <input type="text" className="input" onChange={(e) => { setQuestion(e.target.value) }} />
                <button onClick={send}>发送</button>
            </div>
            <div className="response">
                <div>
                    <label htmlFor="">streaming</label>
                    <input type="checkbox" onChange={(e) => {
                        e.target.checked ? setStreaming(true) : setStreaming(false);
                    }} />
                </div>
                <div>{response}</div>
            </div>
        </div>

    )
}
export default DeepSeek;